<?php
//引入系统配置文件
include_once('config/init.php');
include_once('check.php');

// 接受action
$action = isset($_POST['action'])? $_POST['action'] : '';

if($action == 'job') {
    // 统计职位信息
    $sql = "SELECT count(person.id) AS c,job.name FROM {$pre_}person AS person LEFT JOIN {$pre_}job AS job ON person.jobid = job.id GROUP BY jobid";
    
    $job = all($sql);
    
    // 字段提取
    $x = array_column($job,'name');
    $y = array_column($job,'c');

    // 组装数据
    $res = [
        'x' => $x,
        'y' => $y
    ];

    echo json_encode($res);
    exit;
}

if($action == 'dep'){
    // 统计部门信息
    $sql = "SELECT count(person.id) AS value,dep.name FROM {$pre_}person AS person LEFT JOIN {$pre_}department AS dep ON person.depid = dep.id GROUP BY depid";

    $deplist = all($sql);
    
    echo json_encode($deplist);
    exit;
}

?>
<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- 引入公共样式 -->
        <?php include_once('meta.php');?>

        <!-- 引入echarts插件 -->
        <script src="./assets/plugins/echarts.min.js"></script>
        <style>
            #job,#dep{
                height:500px;
            }
        </style>
    </head>

    <body>
        <!-- 引入头部 -->
        <?php include_once('header.php');?>

        <!-- 引入菜单 -->
        <?php include_once('menu.php');?>

        <div class="content">
            <div class="header">
                <h1 class="page-title">后台首页</h1>
            </div>
            <ul class="breadcrumb">
                <li class="active">Index</li>
            </ul>

            <div class="container-fluid">
                <div class="row-fluid">
               
                        <div id="job" ></div>
                        <div id="dep" ></div>
                    
                    <footer>
                        <hr>
                        <p>&copy; 2017 <a href="#" target="_blank">copyright</a></p>
                        <p>
                        <a href="https://beian.miit.gov.cn/" target="_blank">备案号</a>
                        <a href="https://beian.miit.gov.cn/" target="_blank">辽ICP备2023012557号</a>
                        </p>

                    </footer>
                </div>
            </div>
        </div>
    </body>
</html>
<script>
    // 职位统计
    $.ajax({
        type:'post',
        dataType:'json',
        data:{action:'job'},
        success:function(success){
            var Ydata = [];
            for(var item of success.y){
                var r = Math.floor(Math.random()*255)
                var g = Math.floor(Math.random()*255)
                var b = Math.floor(Math.random()*255)

                // 组装数据
                Ydata.push({
                    value:item,
                    itemStyle:{
                        color:`rgb(${r},${g},${b})`
                    }
                })
            }
            // 配置选项
            var options = {
                title: {
                    text: "职位统计条形图",
                    left: "center"
                },

                xAxis: {
                    type: 'category',
                    data: success.x
                },
                
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: Ydata,
                        type: 'bar'
                    }
                ]
            }

            var dom = document.getElementById('job')
            var myChart = echarts.init(dom)
            // 设置选项
            myChart.setOption(options)
        },
        error:function(error){
            console.log(error)
        }
    })

    // 部门统计
    $.ajax({
        type:'post',
        dataType:'json',
        data:{action:'dep'},
        success:function(success){
            // console.log(success);
            var options = {
                title: {
                    text: '部门统计扇形图',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                    name: '统计人数',
                    type: 'pie',
                    radius: '50%',
                    data: success,
                    emphasis: {
                        itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                    }
                ]
            };

            var dom = document.getElementById('dep');
            var myChart = echarts.init(dom);
            myChart.setOption(options);
        },
        error:function(error){
            console.log(error);
        }
    })
</script>
